{% extends "base.html" %} {% block style %}
<style></style>
{% endblock %} {% block content %}

{% comment %} <h4 style="text-align: center">部署静态资源</h4> {% endcomment %}

<form method="post" enctype="multipart/form-data" class="form">
  {% csrf_token %}
  <div class="form-group row">
    <label for="htmlFile" class="col-sm-1 col-form-label">类型选择<span style="color:red">*</span></label>
    <div class="col-sm-10" style="display: flex; align-items: center">
      <select class="form-control" name="type" id="selectType" required>
        <option value="file">压缩包</option>
        <option value="url">URL</option>
      </select>
    </div>
  </div>
  <div class="form-group row">
    <label for="htmlFile" class="col-sm-1 col-form-label">资源名称</label>
    <div class="col-sm-10">
      <input
        type="text"
        name="name"
        id=""
        class="form-control"
        placeholder="默认文件名称或者网页标题"
        
      />
    </div>
  </div>
  <div class="form-group row">
    <label for="htmlFile" class="col-sm-1 col-form-label">原始url<span style="color:red">*</span></label>
    <div class="col-sm-10">
      <input
        type="text"
        name="source_url"
        id=""
        class="form-control"
        placeholder="请输入原始url"
        required
      />
    </div>
  </div>
  {% comment %} <div class="form-group row">
    <label for="htmlFile" class="col-sm-1 col-form-label">路径名称</label>
    <div class="col-sm-10">
      <input
        type="text"
        name="path"
        id=""
        class="form-control"
        placeholder="示例：/test"
        required
      />
    </div>
  </div> {% endcomment %}
  <div class="form-group row" id="fileDiv" style="display: none">
    <label for="htmlFile" class="col-sm-1 col-form-label">静态网页文件<span style="color:red">*</span></label>
    <div class="col-sm-10" style="display: flex; align-items: center">
      <input
        type="file"
        name="file"
        class="form-control-file"
        accept=".zip"
        id="htmlFile"
      />
    </div>
  </div>
  {% comment %} <div class="form-group row" id="urlDiv">
    <label for="htmlFile" class="col-sm-1 col-form-label">URL</label>
    <div class="col-sm-10" style="display: flex; align-items: center">
      <input type="input" name="url" class="form-control" id="url" />
    </div>
  </div> {% endcomment %}
  <div class="form-group row">
    <label class="col-sm-1 col-form-label"></label>
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </div>
</form>
<script>
  $(document).ready(function () {
    $("#selectType").change(function () {
      var selectValue = $(this).val();

      if (selectValue === "url") {
        $("#urlDiv").show();
        $("#url").prop("required", true);
        $("#fileDiv").hide();
        $("#htmlFile").prop("required", false);
      } else {
        $("#fileDiv").show();
        $("#htmlFile").prop("required", true);

        $("#urlDiv").hide();
        $("#url").prop("required", false);
      }
    });

    $("#selectType").trigger("change");
  });
</script>
{% endblock %}
